
<head>
    <meta charset="UTF-8">
    <title>Server Manage</title>
    <style>
        UIKitCss
    </style>
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/css/uikit.min.css"/>-->
    <!-- UIkit JS -->
<!--    <script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit.min.js"></script>-->
<!--    <script src="https://cdn.jsdelivr.net/npm/uikit@3.2.2/dist/js/uikit-icons.min.js"></script>-->
    <script>
        UIKitJs;
        uiKitIconsJs;
        MetricFlowJs;
        jQueryJs;
        var graph;
        var d = 180;
        var globalThreshold = globalThresholdValue;
        var globalNeedLogin = globalNeedLoginValue;
        var globalToken = sessionStorage.getItem("kotimeToken")
        $(document).ready(function () {
            let globalIsLogin = false;
            $.ajaxSettings.async = false;

            $.get('contextPath/api/getStatistic?token='+globalToken, function (result) {
                let data = result.data
                let totalNum = data['totalNum'];
                let systemTotalNum = document.getElementById("systemTotalNum");
                systemTotalNum.innerHTML=systemTotalNum.innerHTML+"<br>"+totalNum;

                let normalNum = data['normalNum'];
                let systemNormalNum = document.getElementById("systemNormalNum");
                systemNormalNum.innerHTML=systemNormalNum.innerHTML+"<br>"+normalNum;

                let delayNum = data['delayNum'];
                let systemDelayNum = document.getElementById("systemDelayNum");
                systemDelayNum.innerHTML=systemDelayNum.innerHTML+"<br>"+delayNum;
                if (delayNum>0) {
                    systemDelayNum.className+=' uk-label-danger';
                };
                let avgRunTime = data['avgRunTime'];
                let systemAvgRunTime = document.getElementById("systemAvgRunTime");
                systemAvgRunTime.innerHTML=systemAvgRunTime.innerHTML+"<br>"+avgRunTime;
                if (avgRunTime>globalThreshold) {
                    systemAvgRunTime.className+=' uk-label-danger';
                };

                let maxRunTime = data['maxRunTime'];
                let systemMaxRunTime = document.getElementById("systemMaxRunTime");
                systemMaxRunTime.innerHTML=systemMaxRunTime.innerHTML+"<br>"+maxRunTime;
                if (maxRunTime>globalThreshold) {
                    systemMaxRunTime.className+=' uk-label-danger';
                };

                let minRunTime = data['minRunTime'];
                let systemMinRunTime = document.getElementById("systemMinRunTime");
                systemMinRunTime.innerHTML=systemMinRunTime.innerHTML+"<br>"+minRunTime;
                if (minRunTime>globalThreshold) {
                    systemMinRunTime.className+=' uk-label-danger';
                };

            });
            $.ajaxSettings.async = false;
            let searchText = $("#searchText").val();
            // $.get('contextPath/koTime/getExceptions?token='+globalToken, function (data) {
            //     let element = document.getElementById('exceptionList');
            //     html = '';
            //     for (let i = 0; i < data.length; i++) {
            //         let id = data[i]['id'];
            //         let className = data[i]['className'];
            //         let message = data[i]['message'];
            //         html += "<li onclick=\"showExceptions('"+id+"','"+message+"')\" style='' id=\""+id+"\"><span style='font-size: 16px;font-weight: 500;'>"+className+"</span>&nbsp &nbsp<span style='font-size: 10px;' class=\"uk-label uk-label-danger\">"+message+"</span></li>";
            //     };
            //     element.innerHTML = html;
            // });

            //====================================================================================================
            $.get('contextPath/server/cpu?token='+globalToken, function (result) {
                let data = result.data
                let html = '';
                let serverCpuDiv = document.getElementById("serverCpuDiv");
                html += itemCreate('系统占用率(%)',data.systemLoad);
                html += itemCreate('内核利用率(%)',data.sysRate);
                html += itemCreate('用户使用率(%)',data.userRate);
                html += itemCreate('读写等待(%)',data.waitRate);
                html += itemCreate('逻辑处理器',data.logicalNum);
                serverCpuDiv.innerHTML = html;
            });
            $.get('contextPath/server/thread?token='+globalToken, function (result) {
                let data = result.data
                let html = '';
                let serverThreadDiv = document.getElementById("serverThreadDiv");
                html += itemCreate('就绪线程',data.runnableCount);
                html += itemCreate('等待线程',data.waitingCount);
                html += itemCreate('阻塞线程',data.blockedCount);
                html += itemCreate('活动线程',data.daemonThreadCount);
                html += itemCreate('守护线程',data.threadCount);
                html += itemCreate('新加入',data.newCount);
                html += itemCreate('最大峰值',data.peakThreadCount);
                html += itemCreate('终止线程',data.terminatedCount);
                html += itemCreate('计时等待',data.timedWaitingCount);
                serverThreadDiv.innerHTML = html;
            });
            $.get('contextPath/server/physicalMemory?token='+globalToken, function (result) {
                let data = result.data
                let html = '';
                let physicalMemoryDiv = document.getElementById("physicalMemoryDiv");
                html += itemCreate('总容量(GB)',data.initValue);
                html += itemCreate('已用(GB)',data.usedValue);
                html += itemCreate('剩余(GB)',data.freeValue);
                html += itemCreate('使用率(%)',data.usedRate);
                physicalMemoryDiv.innerHTML = html;
            });
            $.get('contextPath/server/heapMemory?token='+globalToken, function (result) {
                let data = result.data
                let html = '';
                let heapMemoryDiv = document.getElementById("heapMemoryDiv");
                html += itemCreate('最大容量(GB)',data.maxValue);
                html += itemCreate('初始容量(GB)',data.initValue);
                html += itemCreate('已用(GB)',data.usedValue);
                html += itemCreate('使用率(%)',data.usedRate);
                heapMemoryDiv.innerHTML = html;
            });
            $.get('contextPath/api/queryByClass?token='+globalToken, function (result) {
                let data = result.data
                let html = '';
                let classStatisticDiv = document.getElementById("classStatisticDiv");
                for (let i = 0; i < data.length; i++) {
                    let apiItem = data[i];
                    let className = apiItem.className;
                    let classSimpleName = apiItem.classSimpleName;
                    let apiSize = apiItem.apiSize;
                    html += "<div>";
                    html += "<div style=\"border-radius: 10px;\" class=\"uk-card uk-card-small uk-card-default uk-card-body uk-label-success\"><span style=\"font-size: 20px;\">" + classSimpleName + "<br>"+ apiSize +"</span></div>";
                    html += "</div>";
                }
                classStatisticDiv.innerHTML = html;
            });
            $.ajaxSettings.async = true;
        });

        function itemCreate(name,size){
            let html = "<div>";
            html += "<div style=\"border-radius: 10px;\" class=\"uk-card uk-card-small uk-card-default uk-card-body uk-label-success\"><span style=\"font-size: 20px;\">" + name + "<br>"+ size +"</span></div>";
            html += "</div>";
            return html;
        }

        function formData(data) {
            if (data['avgRunTime']>globalThreshold) {
                data['style'] = {
                    'title-color':'#c71335',
                    'border-color':'#c71335',
                    'data-font-size':'10px',
                    'title-font-size':'12px'
                }
            }
            else{
                data['style'] = {
                    'title-color':'#375d46',
                    'border-color':'#375d46',
                    'data-font-size':'10px',
                    'title-font-size':'12px'
                }
            };
            data['title'] = {'name':data['name']};
            data['data'] = [
                {'name':'<span style="color:gray">类型：</span>'+data['methodType']},
                {'name':'<span style="color:gray">平均耗时：</span>'+data['avgRunTime']+' ms'},
                {'name':'<span style="color:gray">最大耗时：</span>'+data['maxRunTime']+' ms'},
                {'name':'<span style="color:gray">最小耗时：</span>'+data['minRunTime']+' ms'}
            ];
            if (data['exceptionNum']!=null && data['exceptionNum']>0) {
                data['data'].push({'name':'<span style="color:gray">异常数目：</span>'+data['exceptionNum']+' 个'});
            }
            data["dblclick"]="paramGraph";
            return data;
        };
        function apiStart(apiId) {
            let url = "contextPath/api/start?id=" + apiId + "&token="+globalToken;
            $.get(url, function (data) {
                // alert(JSON.stringify(data));
                let message = data.message;
                UIkit.notification({message: message, status: 'success'});
                // UIkit.notification({message: 'Warning message...', status: 'warning'});
            });
        };
        function apiShutdown(apiId) {
            let url = "contextPath/api/shutdown?id=" + apiId + "&token="+globalToken;
            $.get(url, function (data) {
                // alert(JSON.stringify(data));
                let message = data.message;
                UIkit.notification({message: message, status: 'success'});
            });
        };
        function apiShutdownAll() {
            $.get('contextPath/api/shutdownAll?token='+globalToken, function (data) {
                // alert(JSON.stringify(data));
                let message = data.message;
                UIkit.notification({message: message, status: 'success'});
            });
        };
    </script>
</head>
<body>


<nav class="uk-navbar-container" style="background-color: white" uk-navbar>
    <div class="uk-navbar-center">
        <div class="uk-grid-small" uk-grid>
            <div style="margin-top: 20px;font-size: 20px;" class="uk-width-expand" >服务器监控大屏</div>
        </div>
    </div>
</nav>

<ul class="uk-flex-center" uk-tab>
    <li id="zl" class="uk-active"><a href="#" >总览</a></li>
    <li id="jklb"><a href="#" >接口列表</a></li>
</ul>

<ul class="uk-switcher uk-margin">
    <li style="margin-left: 10%;margin-right: 10%;">
        <ul class="uk-flex-left" uk-tab>
            <li class="uk-active"><a href="#" >接口统计</a></li>
        </ul>
        <div style="margin-top: 20px;" class="uk-grid-small uk-child-width-expand@s uk-text-center" uk-grid>
            <div>
                <div id="systemTotalNum" style="border-radius: 10px;" class="uk-card uk-card-default uk-card-body uk-label-success"><span style="font-size: 20px;">接口数</span></div>
            </div>
            <div>
                <div id="systemDelayNum" style="border-radius: 10px;" class="uk-card uk-card-default uk-card-body uk-label-success"><span style="font-size: 10px;">延迟响应数</span></div>
            </div>
            <div>
                <div id="systemNormalNum" style="border-radius: 10px;" class="uk-card uk-card-default uk-card-body uk-label-success"><span style="font-size: 10px;">正常响应数</span></div>
            </div>
        </div>

        <ul style="margin-top: 10px;" class="uk-flex-left" uk-tab>
            <li class="uk-active"><a href="#" >响应统计</a></li>
        </ul>
        <div style="margin-top: 10px;" class="uk-grid-small uk-child-width-expand@s uk-text-center" uk-grid>
            <div>
                <div id="systemAvgRunTime" style="border-radius: 10px;" class="uk-card uk-card-default uk-card-body uk-label-success"><span style="font-size: 10px;">平均响应（ms）</span></div>
            </div>
            <div>
                <div id="systemMaxRunTime" style="border-radius: 10px;" class="uk-card uk-card-default uk-card-body uk-label-success"><span style="font-size: 10px;">最大响应（ms）</span></div>
            </div>
            <div>
                <div id="systemMinRunTime" style="border-radius: 10px;" class="uk-card uk-card-default uk-card-body uk-label-success"><span style="font-size: 10px;">最小响应（ms）</span></div>
            </div>
        </div>
        <div class="uk-alert-success" uk-alert>
            <a class="uk-alert-close" uk-close></a>
            <p id="apiTip">变更配置以后请重新刷新页面</p>
        </div>
        <ul style="margin-top: 10px;" class="uk-flex-left" uk-tab>
            <li class="uk-active"><a href="#" >处理器状态</a></li>
        </ul>
        <!--        <div style="margin-top: 10px;" class="uk-grid-column-small uk-grid-row-large uk-child-width-1-5@s uk-text-center" uk-grid>-->
        <div id="serverCpuDiv" style="margin-top: 10px;" class="uk-grid-small uk-child-width-1-5@s uk-flex-left uk-text-center" uk-grid>
        </div>
        <ul style="margin-top: 10px;" class="uk-flex-left" uk-tab>
            <li class="uk-active"><a href="#" >线程状态</a></li>
        </ul>
        <!--        <div style="margin-top: 10px;" class="uk-grid-column-small uk-grid-row-large uk-child-width-1-5@s uk-text-center" uk-grid>-->
        <div id="serverThreadDiv" style="margin-top: 10px;" class="uk-grid-small uk-child-width-1-4@s uk-flex-left uk-text-center" uk-grid>
        </div>
        <ul style="margin-top: 10px;" class="uk-flex-left" uk-tab>
            <li class="uk-active"><a href="#" >物理内存</a></li>
        </ul>
        <div id="physicalMemoryDiv" style="margin-top: 10px;" class="uk-grid-small uk-child-width-1-4@s uk-flex-left uk-text-center" uk-grid>
        </div>
        <ul style="margin-top: 10px;" class="uk-flex-left" uk-tab>
            <li class="uk-active"><a href="#" >应用内存</a></li>
        </ul>
        <div id="heapMemoryDiv" style="margin-top: 10px;" class="uk-grid-small uk-child-width-1-4@s uk-flex-left uk-text-center" uk-grid>
        </div>
        <ul style="margin-top: 10px;" class="uk-flex-left" uk-tab>
            <li class="uk-active"><a href="#" >接口定义</a></li>
        </ul>
<!--        <div style="margin-top: 10px;" class="uk-grid-column-small uk-grid-row-large uk-child-width-1-5@s uk-text-center" uk-grid>-->
        <div id="classStatisticDiv" style="margin-top: 10px;" class="uk-grid-small uk-child-width-1-4@s uk-flex-left uk-text-center" uk-grid>
<!--            <div>-->
<!--                <div style="border-radius: 10px;" class="uk-card uk-card-default uk-card-body uk-label-success"><span style="font-size: 10px;">平均响应（ms）</span></div>-->
<!--            </div>-->
        </div>
    </li>
    <li style="margin-left: 0%;margin-right: 0%;">
        <div class="uk-child-width-1-3@s uk-grid-collapse uk-text-center" uk-grid>
            <div>
                <div class="uk-tile uk-tile-default">
                    <p class="uk-h4">Default</p>
                </div>
            </div>
            <div>
                <div class="uk-tile uk-tile-muted">
                    <p class="uk-h4">Muted</p>
                </div>
            </div>
            <div>
                <div class="uk-tile uk-tile-primary">
                    <p class="uk-h4">Primary</p>
                </div>
            </div>
            <div>
                <div class="uk-tile uk-tile-secondary">
                    <p class="uk-h4">Secondary</p>
                </div>
            </div>
            <div>
                <div class="uk-tile uk-tile-primary">
                    <p class="uk-h4">Primary</p>
                </div>
            </div>
            <div>
                <div class="uk-tile uk-tile-secondary">
                    <p class="uk-h4">Secondary</p>
                </div>
            </div>
            <div>
                <div class="uk-tile uk-tile-secondary">
                    <p class="uk-h4">Secondary</p>
                </div>
            </div>
        </div>
        <div class="uk-section uk-section-default">
            <div class="uk-container">
                <h3>Section Default</h3>
                <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                </div>

            </div>
        </div>
        <div class="uk-section uk-section-muted">
            <div class="uk-container">
                <h3>Section Muted</h3>
                <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                </div>

            </div>
        </div>

        <div class="uk-section uk-section-primary uk-light">
            <div class="uk-container">
                <h3>Section Primary</h3>
                <div class="uk-grid-match uk-child-width-1-5@m" uk-grid>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                </div>

            </div>
        </div>

        <div class="uk-section uk-section-secondary uk-light">
            <div class="uk-container">

                <h3>Section Secondary</h3>

                <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                    <div>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                    </div>
                </div>

            </div>
        </div>

        <div class="uk-section-default">
            <div class="uk-section uk-light uk-background-cover" style="background-image: url(http://v3.getuikit.work/skin/ukv3/images/dark.jpg)">
                <div class="uk-container">
                    <h3>Section with Images</h3>
                    <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
                        <div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                        </div>
                        <div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                        </div>
                        <div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                        </div>
                    </div>

                </div>
            </div>
        </div>
        <div class="uk-section-default">
            <div class="uk-section uk-light uk-background-cover" style="background-image: url(http://v3.getuikit.work/skin/ukv3/images/dark.jpg)">
                <div class="uk-container">

                    <h3>Section with Images</h3>

                    <div class="uk-grid-match uk-child-width-1-3@m" uk-grid>
                        <div>
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</p>
                        </div>
                        <div>
<!--                            <div class="uk-child-width-1-2@s uk-grid-collapse uk-text-center" uk-grid>-->
<!--                                <div>-->
<!--                                    <div class="uk-tile uk-tile-default">-->
<!--                                        <p class="uk-h4">总容量(GB)</p>-->
<!--                                        <p class="uk-h6">7.83</p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div>-->
<!--                                    <div class="uk-tile uk-tile-muted">-->
<!--                                        <p class="uk-h4">已用(GB)</p>-->
<!--                                        <p class="uk-h6">7.03</p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div>-->
<!--                                    <div class="uk-tile uk-tile-primary">-->
<!--                                        <p class="uk-h4">剩余(GB)</p>-->
<!--                                        <p class="uk-h6">0.86</p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                                <div>-->
<!--                                    <div class="uk-tile uk-tile-secondary">-->
<!--                                        <p class="uk-h4">使用率(%)</p>-->
<!--                                        <p class="uk-h6">89.02</p>-->
<!--                                    </div>-->
<!--                                </div>-->
<!--                            </div>-->
                        </div>
                        <div>
                            <div class="uk-child-width-1-2@s uk-grid-collapse uk-text-center" uk-grid>
                                <div>
                                    <div class="uk-tile uk-tile-default">
<!--                                        <p class="uk-h4 ">总容量(GB)</p>-->
<!--                                        <p class="uk-h4 ">7.83</p>-->
                                        <span style="font-size: 20px;">总容量(GB)<br>7.83</span>
                                    </div>
                                </div>
                                <div>
                                    <div class="uk-tile uk-tile-muted">
<!--                                        <p class="uk-h4 ">已用(GB)</p>-->
<!--                                        <p class="uk-h4 ">7.03</p>-->
                                        <span style="font-size: 20px;">已用(GB)<br>7.03</span>
                                    </div>
                                </div>
                                <div>
                                    <div class="uk-tile uk-tile-primary">
<!--                                        <p class="uk-h4 ">剩余(GB)</p>-->
<!--                                        <p class="uk-h4 ">0.86</p>-->
                                        <span style="font-size: 20px;">剩余(GB)<br>0.86</span>
                                    </div>
                                </div>
                                <div>
                                    <div class="uk-tile uk-tile-secondary">
<!--                                          uk-margin-remove uk-padding-remove-->
<!--                                        <p class="uk-h4 "></p>-->
<!--                                        <p class="uk-h4 ">89.02</p>-->
                                        <span style="font-size: 20px;">使用率(%)<br>89.02</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </li>
</ul>

<div id="modal-exception" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-default" type="button" uk-close></button>
        <div id="exception-detail" class="uk-modal-body uk-margin-auto-vertical" uk-overflow-auto>

        </div>
        <div class="uk-modal-footer uk-text-right">
            <button class="uk-button uk-button-primary  uk-modal-close" type="button">朕知道了</button>
        </div>

    </div>
</div>

<div id="modal-method" class="uk-modal-full" uk-modal>
    <div class="uk-modal-dialog">
        <button class="uk-modal-close-full uk-close-large" type="button" uk-close></button>
        <div class="uk-grid-collapse uk-child-width-1-1@s uk-flex-middle" uk-grid>
            <div uk-height-viewport>
                <div id="layerDemo" width="1200px" height="900px">
                </div>
            </div>
        </div>
    </div>
</div>

<div id="modal-login" class="uk-modal-full" uk-modal>
    <div class="uk-modal-dialog">
        <div class="uk-grid-collapse uk-child-width-1-1@s uk-flex-middle" uk-grid>
            <div   uk-height-viewport>
                <div class="uk-text-center" uk-grid>
                    <div class="uk-width-1-4@m">
                    </div>
                    <div class="uk-width-2-4@m" style="margin-top: 100px;">
                        <div class="uk-grid-small" uk-grid>
                            <div style="font-size: 35px;" class="uk-width-expand" >KoTime调用链路追踪</div>
                        </div>
                    </div>
                    <div class="uk-width-1-4@m">
                    </div>
                </div>

                <div class="uk-text-center" uk-grid>
                    <div class="uk-width-1-3@m">
                    </div>
                    <div class="uk-width-1-3@m" style="margin-top: 10px;">
                        <form >

                            <div class="uk-margin">
                                <div class="uk-inline">
                                    <span class="uk-form-icon" uk-icon="icon: user"></span>
                                    <input id="userName" class="uk-input" type="text">
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline">
                                    <span class="uk-form-icon uk-form-icon-flip" uk-icon="icon: lock"></span>
                                    <input id="userPassword" type="password" class="uk-input" >
                                </div>
                            </div>
                            <div class="uk-margin">
                                <div class="uk-inline">
                                    <a class="uk-button uk-button-default uk-label-success" onclick="login();"  >确定</a>
                                </div>
                            </div>

                        </form>
                    </div>
                    <div class="uk-width-1-3@m">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<div id="offcanvas-reveal" uk-offcanvas="mode: reveal; overlay: true; flip: true">
    <div class="uk-offcanvas-bar">
        <button class="uk-offcanvas-close" type="button" uk-close></button>
        <h3>Title</h3>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
        <button class="uk-button uk-button-primary uk-button-small" onclick="apiStartAll()">全部开启</button>
        <button class="uk-button uk-button-danger uk-button-small" onclick="apiShutdownAll()">全部关闭</button>
    </div>
</div>

<!--<div class="uk-margin-medium-bottom" style="position:absolute;top:95%;left:45%;text-align:center;">-->
<!--    <ul class="uk-flex-center" uk-tab>-->
<!--        <li class=""><a style="font-size: 7px;text-transform:capitalize" href="#">@2021 Huoyo</a></li>-->
<!--    </ul>-->
<!--</div>-->

</body>
